<template>
  <el-dialog
    :title="dialog.title"
    :visible.sync="dialog.visible"
    width="800px"
    @close="onClose"
  >
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <el-col :span="24">
          <el-form-item label="所属上级" prop="parent">
            <el-cascader
              v-model="formData.parent"
              :options="parentIdOptions"
              :props="parentIdProps"
              :style="{ width: '100%' }"
              placeholder="请选择所属上级"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="栏目名称" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入栏目名称"
              :maxlength="30"
              show-word-limit
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="广告类型" prop="flag">
            <el-select
              v-model="formData.flag"
              placeholder="请选择广告类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in flagOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="广告位宽度" prop="width">
            <el-input
              v-model="formData.width"
              placeholder="请输入广告位宽度（单位px）"
              :maxlength="10"
              show-word-limit
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="广告位高度" prop="height">
            <el-input
              v-model="formData.height"
              placeholder="请输入（单位px）广告位高度"
              :maxlength="10"
              show-word-limit
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否有效" prop="status" required>
            <el-switch v-model="formData.status"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="广告位说明" prop="summary">
            <el-input
              v-model="formData.summary"
              type="textarea"
              placeholder="简要说明一下，广告的位置，作用等。"
              :maxlength="500"
              show-word-limit
              :autosize="{ minRows: 3, maxRows: 3 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button
        type="primary"
        :loading="dialog.btnLoading"
        @click="handelConfirm"
      >
        确 定
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { getList, add, update, typeList } from '@/api/cms/advcolumn'
  import { changeTree } from '@/utils/treeTool'
  import { deepClone } from '@/utils/index'
  export default {
    props: [],
    data() {
      return {
        dialog: {
          title: '添加广告栏目',
          visible: false,
          btnLoading: false,
        },
        formData: {
          parent: [],
          name: undefined,
          flag: undefined,
          width: undefined,
          height: undefined,
          status: true,
          summary: undefined,
        },
        rules: {
          parent: [
            {
              required: true,
              type: 'array',
              message: '请至少选择一个所属上级',
              trigger: 'change',
            },
          ],
          name: [
            {
              required: true,
              message: '请输入栏目名称',
              trigger: 'blur',
            },
          ],
          flag: [
            {
              required: true,
              message: '请选择广告类型',
              trigger: 'change',
            },
          ],
          width: [
            {
              required: true,
              message: '请输入广告位宽度（单位px）',
              trigger: 'blur',
            },
            {
              pattern: /^\d+$/,
              message: '必须为数字',
              trigger: 'blur',
            },
          ],
          height: [
            {
              required: true,
              message: '请输入（单位px）广告位高度',
              trigger: 'blur',
            },
            {
              pattern: /^\d+$/,
              message: '必须为数字',
              trigger: 'blur',
            },
          ],
          summary: [],
        },
        parentIdOptions: [],
        flagOptions: [],
        parentIdProps: {
          multiple: false,
          label: 'label',
          value: 'value',
          children: 'children',
        },
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      async initTree() {
        const t = await getList()
        let _tree = [{ id: '1', value: '0', label: '一级栏目', parentId: '0' }]
        t.data.some((m) => {
          _tree.push({
            id: m.id,
            value: m.id,
            label: m.name,
            parentId: m.parentId,
          })
        })
        this.parentIdOptions = changeTree(_tree)
        const advtype = await typeList({
          id: '1366297814564474880',
          limit: 100,
        })
        advtype.data.items.some((m) => {
          this.flagOptions.push({ label: m.name, value: m.codeValues })
        })
      },
      onClose() {
        this.$refs['elForm'].resetFields()
      },
      close() {
        this.dialog.visible = false
        this.$refs['elForm'].resetFields()
      },
      handelConfirm() {
        this.$refs['elForm'].validate(async (valid) => {
          if (!valid) return
          const _parentList = this.formData.parent.join(',')
          this.formData.parentId = this.formData.parent.pop()
          this.formData.parentIdList = _parentList
          let tipName = '添加成功'
          let res = null
          if (!this.formData.id) {
            this.formData.id = undefined
            res = await add(this.formData)
          } else {
            tipName = '修改成功'
            res = await update(this.formData)
          }
          if (res.code == 200) {
            this.close()
            this.$emit('complete')
            this.$notify({
              message: tipName,
              type: 'success',
            })
          } else {
            this.$notify({
              message: message,
              type: 'error',
            })
          }
        })
      },
      handleAdd() {
        this.formData.id = undefined
        this.dialog.title = '添加广告栏目'
        this.dialog.visible = true
        this.initTree()
      },
      handelModify(record) {
        this.initTree()
        record.parent = []
        var str = record.parentIdList.split(',')
        str.forEach(function (item, i) {
          if (item != record.id && item) {
            record.parent.push(item)
          }
          if (record.parentId == '0' && item) {
            record.parent.push('0')
          }
        })
        this.dialog.title = '编辑广告栏目'
        this.dialog.visible = true
        this.formData = deepClone(record)
      },
    },
  }
</script>
